<!doctype html>
<html lang="en-us">

<head>

  <meta charset="utf-8">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>VideoPlay</title>
</head>

<body>
  <div>
    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
  </div>
  <br>
  <div>
    <br>
    <input type="text" name="fname" id="Addr" size="64">
    <br>
    <button class="Play">PlayVideo</button>
    <br>
    <button class="StartAudio">StartAudio</button>
    <br>
    <button class="StopAudio">StopAudio</button>
    <br>
    <button class="StopAll">StopAll</button>
    <br>
  </div>

  <script type="text/javascript">
    var player = null;
    document.querySelector('.Play').addEventListener('click', function () {
      var wsurl = document.getElementById("Addr").value;
      var canvas = document.getElementById('canvas');
      //参数: url、canva、宽、高
      player = createPlayer(wsurl, canvas, 540, 360);
      player.play();
    });
    document.querySelector('.StopAll').addEventListener('click', function () {
      player.stop();
    });
    document.querySelector('.StartAudio').addEventListener('click', function () {
      player.voice(1);
    });
    document.querySelector('.StopAudio').addEventListener('click', function () {
      player.voice(0);
    });
  </script>
  <script async type="text/javascript" src="./MJWebPlayer.js"></script>
</body>

</html>